<template>
<div>
  <Page4AnnotationTool :labelItem="labelItem" :simpleImageLabel1='simpleImageLabel1' :imageUrl="simpleImageLabel" :labels="initLabels"  @labelClick="labelClick"  @error="error" @contextmenu="contextmenu"/>
</div>
</template>
<script setup>
import Page4AnnotationTool from './Page4AnnotationTool.vue'
import { ref, onMounted } from 'vue';
const simpleImageLabel = ref('https://king2088.github.io/simple-image-label/1.c6fd5d15.jpg');
const simpleImageLabel1 = ref('https://king2088.github.io/simple-image-label/2.c318c7c4.jpg');
const initLabels =  [{
  color: 'red',
  height: 0.251473,
  name: 'House',
  width: 0.200318,
  x: 0.0309278,
  y: 0.532417,
}, {
  x: 0.588202,
  y: 0.42436100000000004,
  width: 0.37571599999999994,
  height: 0.453832,
  name: 'Tree',
  color: 'yellow'
}]
// 生成UUID
 function uuidGenerate() {
  var s = [];
  var hexDigits = "0123456789abcdef";
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[8] = s[13] = s[18] = s[23] = "-";

  var uuid = s.join("");
  return uuid;
}
const labelItem  = ref({
    uuid: uuidGenerate, // 随机生成
    x: 0, // 百分比 = 左上角x轴坐标 / 当前图片宽度
    y: 0, // 百分比 = 左上角y轴坐标 / 当前图片高度
    width: 0, // 矩形宽度百分比 = 矩形宽度 / 当前图片宽度
    height: 0, // 矩形高度百分比 = 矩形高度 / 当前图片高度
    name: 'wwwwwwww', // 矩形名称
    color: 'red' // 矩形颜色
}) // 随机生成
const contextmenu = (e) => {
  console.log('====================================');
  console.log(e);
  console.log('====================================');
}
const labelClick = (e,s) => {
  console.log('eeeee',e,'sssss',s);
  
}
</script>